<template>
  <view class="ul-tag-list">
    <view class="tag-list">
      <view class="group-title">订单标签</view>
      <view v-for="tag in ORDER_TAG_LIST" :key="tag.value" class="tag-item" @click="activedChange(tag)">
        <text class="tag-item-inner" :class="{ actived: activedTag.includes(tag.value) }">
          <text class="tag-item_icon" :class="['tag_' + tag.value]"></text>
          <text class="tag-item_label"> {{ tag.label }}</text>
          <text class="tag-item_count">({{ statistics['num' + tag.value] || 0 }})</text>
        </text>
      </view>
      <view class="group-title" style="margin-top: 12rpx">其他标签</view>
      <view v-for="tag in ORTHER_TAG_LIST" :key="tag.value" class="tag-item" @click="activedChange(tag)">
        <ve-tooltip class="tooltip-icon" placement="top" v-if="tag.tooltip">
          <template #content>
            <text style="width: 168px; display: inline-block">{{ tag.tooltip }} </text>
          </template>
          <ve-icon name="help" width="36" height="36" />
        </ve-tooltip>
        <text class="tag-item-inner" :class="{ actived: activedTag.includes(tag.value) }">
          <text class="tag-item_icon" :class="['tag_' + tag.value]"></text>
          <text class="tag-item_label"> {{ tag.label }}</text>
          <text class="tag-item_count">({{ statistics['num' + tag.value] || 0 }})</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    // 是否可选
    selectable: {
      type: Boolean,
      default: false,
    },
    // 数据统计数据
    statistics: {
      type: Object,
      default: () => {},
    },
  })
  const emits = defineEmits(['change'])

  // 0:空闲车辆,1:线下订单占用,2:渠道订单占用,3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失
  const ORDER_TAG_LIST = [
    {
      value: '100',
      label: '待用车',
      total: 0,
    },
    {
      value: '200',
      label: '用车中',
      total: 0,
    },
    {
      value: '5',
      label: '车辆冲突',
      total: 0,
    },
    {
      value: '4',
      label: '逾期未还',
      total: 0,
    },
    {
      value: '0',
      label: '无占用车辆',
      total: 0,
    },
  ]

  const ORTHER_TAG_LIST = [
    {
      value: '7',
      label: '临时占用',
      total: 0,
    },
    {
      value: '3',
      label: '维修',
      tooltip: '在企橙创建的维修/逾期未还，不会在渠道占用库存',
      total: 0,
    },
    {
      value: '8',
      label: '已借出',
      total: 0,
    },
    {
      value: '9',
      label: '借出未还',
      total: 0,
    },
  ]

  const activedTag = ref([])
  // 切换标签
  const activedChange = (tag) => {
    if (props.selectable == false) return
    const key = tag.value
    activedTag.value = activedTag.value.includes(key) ? activedTag.value.filter((v) => v !== key) : [...activedTag.value, key]
    emits('change', activedTag.value)
  }
</script>

<style lang="less" scoped>
  @import '../tag.less';
  .tag-list {
    margin: 24rpx;
    padding: 24rpx 24rpx 6rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    display: flex;
    flex-wrap: wrap;

    .group-title {
      width: 100%;
      font-weight: 600;
      font-size: 28rpx;
      color: #191c27;
      line-height: 28rpx;
      margin-bottom: 24rpx;
    }
    .tag-item {
      position: relative;
      width: 310rpx;
      font-size: 28rpx;
      color: #191c27;
      margin-right: 12rpx;
      height: 56rpx;

      .tooltip-icon {
        position: absolute;
        left: -30rpx;
      }
      &-inner {
        padding: 14rpx 12rpx;
        &.actived {
          background: #e8f3ff;
          color: #376eff;
        }
      }

      &_icon {
        display: inline-block;
        width: 24rpx;
        height: 24rpx;
        margin-right: 16rpx;
      }
    }
  }
</style>
